<layout name="layout_admin" />

<div class="pageheader notab">
    <h1 class="pagetitle" id="campaign_title">会员管理</h1>
    <ul class="breadcrumbs breadcrumbs2"  >
        <li>
            <a href="/admin">系统管理</a><span class="divider">&#187;</span>
        </li>
        <li>用户列表</li>
    </ul>
</div>   

<div id="contentwrapper" class="contentwrapper">
    <div id="maincontent">
        <div style="border-bottom:0;padding-bottom:10px">
            <div style="float:right;padding-right:20px;">
                <div id="table_pager" style="float:left;display:block;"></div>
                <div id="table_datepicker" style="float:left;display:block;"></div>
                <div style="float:left;display:block;width:250px;">
                    <form onsubmit='return false;'>
                        <input type="text" id="user_keyword" class="filekeyword" value="" placeholder="输入关键词回车搜索">
                    </form>
                </div>
            </div>
            <br clear="all">
        </div><!--filemgr_category-->

        <table cellpadding="0" cellspacing="0" border="0" class="metrotable datatable" id="member_list">
            <thead id="km_thead">
                <tr>
                    <th width="10%" class="head1">用户名</th>
                    <th width="5%"  class="head0 sortable" data-sort="impressions">浏览量</th>
                    <th width="5%"  class="head0 sortable" data-sort="click">点击量</th>
                    <th width="5%"  class="head0 sortable" data-sort="cvr">点击转化</th>
                    <th width="5%"  class="head0 sortable" data-sort="cost">花销</th>
                    <th width="5%"  class="head0 sortable" data-sort="sales">销售</th>
                    <th width="5%"  class="head0 sortable" data-sort="cpc">点击单价</th>
                    <th width="5%"  class="head0 sortable" data-sort="roi">投资回报</th>
                    <th width="5%" class="head1 sortable" data-sort="balance">账户余额</th>
                    <th width="5%"  class="head0 sortable" data-sort="purchased_time">购买时间</th>
                    <th width="5%"  class="head0 sortable" data-sort="expired_time">到期时间</th>
                    <th width="7%" class="head0 norborder">操作</th>
                </tr>
            </thead>
            <tbody></tbody>
        </table>
    </div>
</div>

<script type="text/html" id="effect_tpl">
    <div class="widget" style="width:680px">
        <table cellpadding="0" cellspacing="0" border="0" class="metrotable datatable" id="member_list">
            <tr>
                <td colspan="6" style="text-align:center;background:#EEEEEE;">店铺信息</td>
            </tr>
            <tr>
                <td>店铺名称</td>    
                <td>店主昵称</td>
                <td>软件使用时间</td>
                <td>软件结束时间</td>
                <td>自动推广宝贝</td>
                <td>全部推广宝贝</td>
            </tr>
            <tr>
                <td>
                    <a href="<%= shop.shop_url %>" target="_blank"><%= shop.title %></a> 
                </td>
                <td>
                    <%= shop.nick %>
                    <a target="_blank" href="http://www.taobao.com/webww/?spm=a1z10.1.0.0.GNVLeO&ver=1&touid=cntaobao<%= shop.nick %>&siteid=cntaobao&status=2&portalId=&gid=&itemsId=">
                        <img border="0" src="http://amos.alicdn.com/online.aw?v=2&uid=<%= shop.nick %>&site=cntaobao&s=2&charset=utf-8" alt="点这里给我发消息" /> &nbsp;
                    </a>
                </td>
                <td><%= shop.start_auto_time %> </td>
                <td><%= shop.expired_time %> </td>
                <td><%= shop.auto_adgroup_num %> </td>
                <td><%= shop.total_adgroup_num  %> </td>
            </tr>
            <tr>
                <td colspan="6" style="text-align:center;background:#EEEEEE;">投资回报率</td>
            </tr>
            <tr>
                <td colspan="6" style="text-align:center;">
                    <span class="heavy orange"><%= round( shop.roi ,2 )%></span>
                </td>
            </tr>
            <tr>
                <td colspan="6" style="text-align:center;background:#EEEEEE;">使用效果</td>
            </tr>
            <tr>
                <td>浏览量</td>    
                <td>点击量</td>
                <td>点击率</td>
                <td>点击单价</td>
                <td>总计花费</td>
                <td>总计成交</td>
            </tr>
            <tr>
                <td>
                    <span class="heavy orange"><%= round(shop.impressions ,2)%></span>
                </td>    
                <td>
                    <span class="heavy orange"><%= round( shop.click , 2) %></span>
                </td>
                <td> 
                    <span class="heavy orange"><%= round( shop.ctr , 2)  %>%</span>
                </td>
                <td>
                    <span class="heavy orange">￥<%= round( shop.cpc, 2) %></span>
                </td>
                <td> 
                    <span class="heavy orange">￥<%= round( shop.cost,2) %></span>
                </td>
                <td>
                    <span class="heavy orange">￥<%= round( shop.sales ,2 )%></span>
                </td>
            </tr>
        </table>
        <textarea readonly="true" class="note readonly" style="width:100%;">
            <%= shop.word %> 
        </textarea>
    </div>
</script>

<script type="text/html" id="users_tpl">
    <tbody>
        <% 
        for(var i=0; i < users.length; ++i){
            var u = users[i];
        %>
        <tr>
            <td>
                <a href="/admin/auth?user_id=<%= u.user_id%>" > <%= users[i].nick%> </a>
            </td>
            <td><%= u.impressions %></td>
            <td> <%= u.click %> </td>
            <td> <%= u.cvr %> % </td>
            <td> <span class="orange"> ￥<%= u.cost%> </span> </td>
            <td> <span class="orange"> ￥<%= u.sales %> </span> </td>
            <td> ￥<%= u.cpc %> </td>
            <td> <span class="heavy"> <%= u.roi %> </span>  </td>
            <td>
                <span class="orange">￥ <%= u.balance %> </span>
            </td>
            <td>
                <%= u.purchased_time %> 
            </td>
            <td>
                <%= u.purchase_expires %> 
            </td>
            <td>
                <div class="dropdown-wrap">
                    <a class="btn btn3 btn_grey tooltips" target="_blank" href="/user/refresh?user_id=<%= u.user_id%>" title="刷新令牌">刷新</a>
                    <a class="btn btn3 btn_grey tooltips" target="_blank" href="/user/sync?user_id=<%= u.user_id%>" title="同步数据">同步</a>
                </div>	  
            </td>
        </tr>
        <% } %>
    </tbody>
</script>
<script type="text/javascript">
    template.helper('round', function(v) {
        v = parseFloat(v);
        if (v) {
            return v.toFixed(2);
        } else {
            return 0;
        }
    });
    
    memberList = function(opts) {
        var _params = $.extend(true, {}, opts) || {};
        var _more = true;
        var self = null;
        return {
            //得到参数表
            getParams: function() {
                return _params;
            },

            //初始化pager , datepicker 
            init: function() {
                if (!self) {
                    self = this;
                }
                //初始化表格头部绑定交互
                self.initHeaders();
                //初始化关键词搜索框交互
                self.initKeywordSearch();
                //初始化翻页
                self.initPager();
                //初始化时间选择器
                //self.initDatepicker();
                //初始化用户登录行的版本选择
                self.getUsers();
            },

            initHeaders: function() {
                var ths = $('#member_list tr th.sortable');
                $.each(ths, function(ix, ele) {
                    if ($(ele).attr('data-sort') == _params.sort) {
                        $(ele).addClass(
                            _params.desc == 'asc' ? 'sorting_desc' : 'sorting_asc'
                        );
                    }
                });

                ths.bind('click', function() {
                    var sortIndex = $(this).attr('data-sort');
                    _params.desc = (sortIndex == _params.sort && _params.desc == 'desc') ? 'asc' : 'desc';
                    _params.sort = sortIndex;
                    $(this).parent().find("th").removeClass('sorting_desc sorting_asc');
                    $(this).addClass(
                        _params.desc == 'desc' ? 'sorting_desc' : 'sorting_asc'
                    );
                    self.getUsers();
                });

                $("#J_filters li a").on('click', function(ix, ele) {
                    var $li = $(this).parent();
                    var filter = $(this).attr('data-filter');
                    // var idx  = in_array(  _params.filters , filter );
                    //_params.filters.push( filter );
                    if (filter != _params.filter) {
                        _params.filter = filter;
                        _params.page = 1;
                        $(this).parents('ul').find('li').removeClass('current');
                        $li.addClass('current');
                        self.getUsers();
                    }
                });

                $('.dropdown-toggle').dropdown();

                $("#J_group li a").on('click', function(evt) {
                    var text = $(this).text();
                    var tag = $(this).attr('data-tag');
                    _params.tag = tag;
                    _params.page = 1;
                    $(this).parents(".dropdown-wrap").find('#current_group').text(text);
                    self.getUsers();
                });
            },

            initKeywordSearch: function() {
                $("#user_keyword").on('change', function() {
                    _params.keyword = $(this).val();
                });
                $("#user_keyword").on('keydown', function(e) {
                    _params.page = 1;
                    var code = (e.keyCode ? e.keyCode : e.which);
                    if (code == 13) {
                        _params.keyword = $(this).val();
                        self.getUsers();
                    }
                });
            },

            initPager: function() {
                //init pager
                var _pager = new wt.pager({
                    container: '#table_pager'
                });

                _pager.next(function() {
                    if (_more) {
                        _params.page++;
                        self.getUsers();
                    }
                });

                _pager.prev(function() {
                    var params = ml.getParams();
                    if (_params.page > 1) {
                        _params.page--;
                        self.getUsers();
                    }
                });
            },

            initDatepicker: function() {
                var _datepicker = new wt.datepicker("#table_datepicker", {
                    placeholder: _params.from + ' 到 ' + _params.to,
                    onChange: function(start, end) {
                        _params.from = start;
                        _params.to = end;
                        self.getUsers();
                    }
                });
            },

            bindRows: function() {
                $('.greeting').on('click', function() {
                    var url = $(this).attr('data-href');
                    wt.get(url, null, function(r) {
                        var o = $.parseJSON(r);
                        if (o.status == 200) {
                            var tpl = template.render('effect_tpl', {
                                shop: o.data
                            });
                            wt.showBox(tpl, o.data.nick + "使用报表", null, false);
                        }
                    });
                });

                $('.stat_detail').on('click', function() {
                    var lis = $(this).parent().find('li.more_detail');
                    if ($(this).attr('data-all') == 'false') {
                        $(this).attr('data-all', 'true');
                        lis.fadeIn(500);
                    } else {
                        $(this).attr('data-all', 'false');
                        lis.fadeOut(500);
                    }
                });

                $(".note").on('dblclick', function() {
                    $(this).removeClass('readonly');
                    $(this).attr('readonly', false);
                });

                $(".note").on('keypress', function(evt) {
                    var keycode = evt.which;
                    var uid = $(this).attr('data-uid');
                    var $this = $(this);
                    if (keycode == 13) {
                        wt.post('/admin/mark/', {
                            action: 'note',
                            uid: uid,
                            text: $(this).val()
                        }, function(res) {
                            $this.find('textarea').attr('readonly', true);
                            $this.addClass('readonly');
                        });
                    }
                });

                $('.selftags').tagsInput({
                    'height': '100%',
                    autocomplete_url: '/admin/autotags',
                    autocomplete: {
                        source: '/admin/autotags',
                        minLength: 1
                    },
                    onAddTag: function(it, eve) {
                        var uid = $(this).attr('data-uid');
                        wt.post('/admin/mark/', {
                            action: 'tag',
                            tag: it,
                            uid: uid
                        });
                    },
                    onRemoveTag: function(it, eve) {
                        var uid = $(this).attr('data-uid');
                        wt.post('/admin/mark/', {
                            action: 'tag',
                            tag: it,
                            uid: uid
                        });
                    }
                });

                var login_btns = $('#member_list a.loginuser');
                $.each(login_btns, function(ix, ele) {
                    $(ele).dropdown();
                });
            },

            getUsers: function() {
                var params = this.getParams();
                wt.post("/admin/member", params, function(r) {
                    var o = $.parseJSON(r);
                    if (o.status == 200) {
                        var tpl = template.render('users_tpl', {
                            users: o.data
                        });
                        $("#member_list").find('tbody').replaceWith(tpl);
                        self.bindRows();
                    }
                });
            },

            setParams: function(params) {
                $.extend(true, _params, params);
            },

            hasMore: function() {
                return _more;
            }
        }
    }

    var ml = new memberList({
        keyword: "",
        page: 1,
        size: 20,
        tag: '',
        sort: 'purchased_time',
        desc: 'desc',
        is_agent: false,
        //filters : ['unused'],
        filter: 'all',
        from: Date.today().add({
            days: -7
        }).toString('yyyy-MM-dd'),
        to: Date.today().add({
            days: -1
        }).toString('yyyy-MM-dd')
    });

    ml.init();
</script>
